<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/12/8
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        table ,td{
            border: 1px solid;
            border-collapse: collapse;
        }
        table {
            width: 300px;
        }

    </style>

</head>
<body>
id：<input type="text" id="id"/> <br />
用户名：<input type="text" id="username"/> <br />
年龄：<input type="text" id="age"/> <br />
密码：<input type="text" id="passward"/> <br />
地址：<input type="text" id="address"/> <br />
<button onclick="addUser()">添加用户</button>
<br />
用户名：<input type="text" id="key" />

<button onclick="queryUser()">查找</button>
<button onclick="queryAll()">查找所有</button>

<table>
    <thead>
    <tr>
        <td>id</td>
        <td>用户名</td>
        <td>密码</td>
        <td>年龄</td>
        <td>地址</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="d2">

    </tbody>
</table>
<script src="js/jquery-3.5.0.min.js"></script>
<script>
    function queryUser() {
        var key=$("#key").val();
            $.ajax({
                url:"user",
                data:{"key":key},
                type:"get",
                dataType:"json",
                success:function (data) {
                    console.log(data);
//                    var d2 = document.getElementById("d2");
                    d2.innerHTML="<tr>"+
                            "<td>"+data.id+"</td>"+
                            "<td>"+data.username+"</td>"+
                            "<td>"+data.age+"</td>"+
                            "<td>"+data.passward+"</td>"+
                            "<td>"+data.address+"</td>"+
                            "<td><a href='javascript:;' onclick='delUser("+da.id+")'>删除</a>"
                            "</tr>";

                }
//                error:function () {
//
//                },
//                beforeSend:function () {
//
//                }
            });


    }
    function addUser() {
        //获取用户输入的id，姓名，年龄
        var id = $("#id").val();
        var name = $("#username").val();
        var age = $("#age").val();
        var passward=$("#passward").val();
        var address=$("#address").val();
        console.log(address);
        //发送添加用户的ajax请求
        $.ajax({

            url:"addUser",
            data:{"id":id,
                "username":name,
                "age":age,
                "address":address,
                "passward":passward
            },
            type: "get",
            dataType:"json",
            success:function (data) {
                console.log("--------"+data);
                if(data.result == 1){
                    alert("添加成功！")
                    queryAll();
                }else{
                    alert("添加失败！")
                }
            }

        });

    }
    function queryAll() {
        d2.innerHTML="";
        $.ajax({
            url:"queryall",
            dataType:"json",
            type:"get",
            success:function (data) {
                console.log(data);
                for(var i=0;i<data.length;i++){
                    var da=data[i];

                    d2.innerHTML+="<tr>"+
                        "<td>"+da.id+"</td>"+
                        "<td>"+da.username+"</td>"+
                        "<td>"+da.age+"</td>"+
                        "<td>"+da.passward+"</td>"+
                        "<td>"+da.address+"</td>"+
                        "<td><a href='javascript:;' onclick='delUser("+da.id+")'>删除</a>"
                    "</tr>";
                }
            }
        });
    }
    function delUser(id) {
        if(confirm("你确定要删除"+id+"号员工吗？"))
        $.ajax({
           url:"deluser",
            data:{"id":id},
           type:"get",
            dataType:"json",
            success:function (data) {
                console.log(data);
                if (data.msg==1){
                    alert("删除成功");
                    //删除结束后再调用查询所有方法把剩下的记录再展现出来
                    queryAll();
                }
            }
        });
    }
</script>
</body>
</html>
